import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:imperius_insights/modules/scope/view_model_department.dart';
import 'package:imperius_insights/portal/state/mobx/widget-state.dart';
import 'package:imperius_insights/treaty/palette.dart';
import 'package:imperius_insights/treaty/strings.dart';

class Screen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ScreenState();
  }
}

class ScreenState extends MobXWidgetState<Screen, ViewModel> {
  @override
  ViewModel createStore() {
    return ViewModel();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(Strings.scope_department_select_title),
          backgroundColor: palette.theme,
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expanded(
                child: Container(
              color: palette.pageBackground,
              child: ListView.builder(
                itemBuilder: (BuildContext context, int index) {
                  final department = viewModel.departments.data[index];
                  return Observer(builder: (_) {
                    final selected = viewModel.current == department.id;
                    if (department.id == null) {
                      return Container(
                        color: Colors.grey[200],
                        padding:
                            EdgeInsets.symmetric(horizontal: 6, vertical: 6),
                        child: Text(department.displayName,
                            style: TextStyle(fontWeight: FontWeight.bold)),
                      );
                    }
                    return InkWell(
                        onTap: () => viewModel.onSelect(department),
                        child: Container(
                          padding: EdgeInsets.all(12),
                          decoration: BoxDecoration(
                              color: selected ? palette.theme : Colors.white,
                              border: Border(
                                  bottom: BorderSide(
                                      width: 0.5, color: palette.divider))),
                          child: Text(department.displayName,
                              style: TextStyle(
                                  color:
                                      selected ? Colors.white : Colors.black)),
                        ));
                  });
                },
                itemCount: viewModel.departments.data.length,
              ),
            )),
          ],
        ));
  }
}
